<script setup lang="ts">
import BaseIcon from "@renderer/assets/icon/BaseIcon.vue";
import { ref, watch } from "vue";
import { EnumViewType } from "@renderer/assets/types";
import { postRequest } from "@renderer/api/request";
import API from '@renderer/api/api';
import { getActiveTabViewOp } from "@renderer/view/hooks/common";
const showTip = ref(false);
const tips = "mip setting";

const {
  activeViewRef
} = getActiveTabViewOp()
const mipOptions = [
  {
    label: "MinIP",
    value: "MinIP",
  },
  {
    label: "MIP",
    value: "MIP",
  },
  {
    label: "SUM",
    value: "Sum",
  },
  {
    label: "Mean",
    value: "Mean",
  },
];

const mipConfigRef = ref<any>({
  enableMIP:false,
  mipMode: "MIP",
  mipVal: {
    [EnumViewType.ax]: 10,
    [EnumViewType.sag]: 10,
    [EnumViewType.cor]: 10,
  }
})

watch(mipConfigRef,async (newVal, oldVal) => {
 await postRequest(API.setMip,{
     groupId:activeViewRef.value.groupId,
     mipSetting: newVal
  })
}, {
  deep: true,
})

</script>

<template>
  <v-menu :close-on-content-click="false" location="top">
    <template v-slot:activator="{ props: menuProps }">
      <v-btn-group class="!h-[35px]">
        <v-tooltip
          :text="tips"
          location="bottom"
          v-bind="menuProps"
          v-model="showTip"
        >
          <template v-slot:activator="{ props }">
            <v-btn-group class="!h-[35px]">
              <v-btn
                class="!w-[55px] !min-w-[35px]"
                :ripple="false"
                v-bind="{ ...props, ...menuProps }"
              >
                <base-icon name="mipIcon" />
                <v-icon icon="mdi-arrow-down-thin"></v-icon>
              </v-btn>
            </v-btn-group>
          </template>
        </v-tooltip>
      </v-btn-group>
    </template>

    <v-card width="500px">
      <v-card-text>
        <v-switch
          v-model="mipConfigRef.enableMIP"
          :label="mipConfigRef.enableMIP ? '启用MIP' : '不启用MIP'"
          color="primary"
          density="compact"
          hide-details
          inset
        ></v-switch>

        <v-divider :thickness="4"></v-divider>

        <v-radio-group hide-details v-model="mipConfigRef.mipMode" inline>
          <v-radio
            v-for="item in mipOptions"
            :label="item.label"
            :value="item.value"
          ></v-radio>
        </v-radio-group>

        <v-slider
          v-for="viewType in [
            EnumViewType.ax,
            EnumViewType.sag,
            EnumViewType.cor,
          ]"
          v-model="mipConfigRef.mipVal[viewType]"
          :max="100"
          :min="1"
          :step="1"
          class="ma-4"
          :label="viewType"
          hide-details
        >
          <template v-slot:prepend> 0 </template>
          <template v-slot:append>
            <span class="!mr-[5px]">100</span>
            <v-text-field
              v-model="mipConfigRef.mipVal[viewType]"
              density="compact"
              style="width: 80px"
              type="number"
              variant="outlined"
              hide-details
            ></v-text-field>
            <span class="!ml-[2px]"> mm </span>
          </template>
        </v-slider>
      </v-card-text>
    </v-card>
  </v-menu>
</template>

<style scoped></style>
